<template>
  <div>
    <lan-header :config="headerConfig"></lan-header>
    <lan-search-form
      size="small"
      :config="searchForm"
      :formData="searchFormData"
      @search="search"
    ></lan-search-form>
    <lan-dialog
      :config="addConfig"
      :formData="addFormData"
    >
      <template #imageUrl="scope">
        <span>
          <image-upload
            class="image-upload-box"
            v-model="scope.data.imageUrl"
          ></image-upload>
          <div
            v-if="scope.data.imageUrl"
            class="remove-btn-box"
          >
            <el-button
              type="text"
              class="remove-btn"
              @click="removeImage"
              icon="el-icon-delete"
            >
            </el-button>
          </div>
        </span>
      </template>
      <template #deviceParameterList="scope">
        <el-select
          class="input"
          v-model="scope.data.deviceParameterList"
          multiple
          filterable
          remote
          reserve-keyword
          placeholder="请选择"
          :remote-method="remoteParameterSearch"
          :loading="remoteLoading"
          value-key="id"
          @focus="remoteParameterSearch()"
          clearable
        >
          <el-option
            class="input"
            v-for="parameter in parameterList"
            :key="parameter.id"
            :label="parameter.label"
            :value="parameter"
          >
          </el-option>
        </el-select>
      </template>
      <template #defaultDeviceParameterId="scope">
        <el-select
          class="input"
          v-model="scope.data.defaultDeviceParameterId"
          placeholder="请选择"
        >
          <el-option
            class="input"
            v-for="parameter in scope.data.deviceParameterList"
            :key="parameter.id"
            :label="parameter.label"
            :value="parameter.id"
          >
          </el-option>
        </el-select>
      </template>
    </lan-dialog>
  </div>
</template>

<script>
import lanSearchForm from '../../../components/lanSearchForm';
import lanHeader from '../../../components/lanHeader';
import lanDialog from '../../../components/lanDialog';
import { createAreaApi } from '../../../api/area';
import moment from 'moment';
import { MomentFormat, SortType } from '../../../constants/common';
import { Message, MessageBox } from 'element-ui';
import { deleteAreaApi, getAreaListApi } from '../../../api/area';
import { parseError } from '../../../utils';
import { createDeviceTypeApi } from '../../../api/deviceType';
import { queryDeviceParameterListApi } from '../../../api/deviceParameter';
import { getActiveSelector } from './service';
import ImageUpload from '../../../components/ImageUpload';

export default {
  components: {
    lanHeader,
    lanSearchForm,
    lanDialog,
    ImageUpload
  },
  props: {
    searchFormData: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      headerConfig: {
        title: '设备类型',
        buttons: [
          {
            text: '新建',
            icon: 'add',
            type: 'primary',
            size: 'small',
            method: () => {
              this.addConfig.dialogVisible = true;
            }
          }
        ]
      },

      searchForm: {
        inline: true,
        size: 'small',
        formList: [
          {
            name: 'name',
            type: 'input',
            placeholder: '设备类型名称'
          },
          {
            name: 'active',
            placeholder: '是否启用',
            type: 'select',
            options: getActiveSelector(),
            optionValue: 'value',
            optionLabel: 'label'
          }
        ]
      },
      addConfig: {
        // width: 600,
        dialogVisible: false,
        title: '添加设备类型',
        type: 'add',
        inline: false,
        labelWidth: 200,
        formList: [
          {
            name: 'name',
            label: '设备类型名称',
            type: 'input',
            placeholder: '请输设备类型名称',
            required: true,
            tooltip: '设备类型的名称，用于区分不同类型的设备，比如Leak-1000',
            width: 300
          },
          {
            name: 'description',
            label: '设备类型描述',
            type: 'input',
            placeholder: '请输设备类型描述',
            tooltip: '设备类型的描述，用于对设备类型的简单说明',
            width: 300
          },
          {
            name: 'imageUrl',
            label: '设备类型图片',
            type: 'slot',
            width: 300,
            tooltip: '设备类型的图片，支持标准图片格式，文件大小不能超过10M'
          },
          {
            name: 'active',
            label: '是否启用',
            type: 'select',
            options: getActiveSelector(),
            optionValue: 'value',
            optionLabel: 'label',
            placeholder: '是否可用',
            tooltip: '是否启用设备类型，只有启用的设备类型才能被设备使用',
            required: true,
            width: 300
          },
          {
            name: 'deviceParameterList',
            label: '设备参数',
            type: 'slot',
            required: true,
            tooltip: '不同设备类型支持独有的设备参数，一般是JSON格式，这些设备参数用来描述设备数据'
            // width: 200
          },
          {
            name: 'defaultDeviceParameterId',
            label: '默认设备参数',
            type: 'slot',
            required: true,
            tooltip: '在设备参数列表里面选择一个默认参数，用于作为设备默认数据源'
            // width: 200
          }
        ],
        buttons: [
          {
            text: '取消',
            icon: '',
            type: '',
            method: () => {
              this.addConfig.dialogVisible = false;
            }
          },
          {
            text: '确认',
            icon: '',
            type: 'primary',
            method: () => {
              this.add();
              this.addConfig.dialogVisible = false;
            }
          }
        ]
      },
      addFormData: {
        ame: '',
        description: '',
        imageUrl: '',
        active: true,
        deviceParameterIdList: [],
        defaultDeviceParameterId: '',
        deviceParameterList: []
      },
      remoteLoading: false,
      parameterList: []
    };
  },
  methods: {
    getActiveSelector,
    removeImage() {
      this.addFormData.imageUrl = '';
    },
    search() {
      this.$emit('search');
    },
    add() {
      createDeviceTypeApi(
        this.addFormData.name,
        this.addFormData.description,
        this.addFormData.imageUrl,
        this.addFormData.active,
        this.addFormData.deviceParameterList.map(parameter => parameter.id),
        // this.parameterList.map(parameter => parameter.id),

        this.addFormData.defaultDeviceParameterId
      )
        .then(res => {
          Message.success('添加成功');
          this.dialogVisible = false;
          this.search();
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.btnLoading = false));
    },
    remoteParameterSearch(query) {
      queryDeviceParameterListApi(query, 10)
        .then(
          parameterList =>
            (this.parameterList = parameterList.map(parameter => {
              return {
                id: parameter.id,
                label: `${parameter.display_name}(${parameter.name})`
              };
            }))
        )
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.remoteLoading = false));
    }
  }
};
</script>

<style lang="scss" scoped>
.input {
  width: 300px;
}
/deep/.el-dialog__body > .lan-form-container > .el-form-item {
  margin-bottom: 22px !important;
}
/deep/.el-icon-delete {
  font-size: 20px;
  color: red;
}
.image-upload-box {
  position: relative;
}
.remove-btn-box {
  width: 178px;
  height: 178px;
  background: rgba($color: #000000, $alpha: 0);
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 24px;
  top: 0px;
  .remove-btn {
    display: none;
  }
}
.remove-btn-box:hover {
  background: rgba($color: #000000, $alpha: 0.3);
  .remove-btn {
    display: block;
  }
}
</style>
